<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div class="row-fluid">
  <div class="box span12">
    <div class="box-header">
      <h2 openlmis-message="report.title.supply.status.by.facility"><i class="icon-edit"></i><span class="break"></span></h2>

      <div class="box-icon">
        <a id="pdf-button" ng-show="filterForm.$valid" href="" ng-click="exportReport('PDF')" class='btn-small btn-info'><span openlmis-message="label.pdf"></span></a>
        <a id="xls-button" ng-show="filterForm.$valid" href="" ng-click="exportReport('XLS')" class='btn-small btn-info'><span openlmis-message="label.excel"></span></a>
      </div>
    </div>

    <div class=row-fluid>
      <div class="sidebar">
          <div class="app-form" style="padding: 5px;">

              <form ng-submit="filterGrid()"  name="filterForm" novalidate>
                  <div filter-container class="clearfix">
                      <program-filter class="form-cell horizontalFilters" required="true"></program-filter>
                      <schedule-filter class="form-cell horizontalFilters" required="true"></schedule-filter>
                      <year-filter class="form-cell horizontalFilters" required="true"></year-filter>
                      <period-filter class="form-cell horizontalFilters" required="true"></period-filter>
                      <zone-filter class="form-cell horizontalFilters"></zone-filter>
                      <facility-type-filter class="form-cell horizontalFilters" ></facility-type-filter>
                      <facility-filter class="form-cell horizontalFilters" required="true"></facility-filter>
                      <product-category-filter class="form-cell horizontalFilters" ></product-category-filter>
                      <product-filter class="form-cell horizontalFilters"></product-filter>
                  </div>
              </form>
          </div>
      </div>
      <div class="content-body">
            <table class="table table-bordered" ng-show="data == undefined || data.length == 0">
              <tr>
                <td>No data to show under selected filters</td>
              </tr>
            </table>
            <div ng-show="datarows.length > 0">
      <div client-side-sort-pagination class="pull-right legend">Page: {{tableParams.page}}, Showing records {{ ((tableParams.page - 1) *
        tableParams.count) + 1 }} to {{ (tableParams.page ) * tableParams.count }} of {{tableParams.total}}
      </div>
      <div class="report-container">
        <div>
          <table  ng-show="datarows.length > 0" class="table-bordered table table-striped" ng-table="tableParams">
            <tbody>
            <tr ng-repeat="row in datarows">
              <td data-title="'#'" class="number" style="width:20px">{{ row.no }}</td>
              <td data-title="getLocalMessage('label.product.code')" style="width:80px" sortable="code">{{ row.code }}</td>
              <td data-title="getLocalMessage('label.product')" style="width:30%" sortable="product">{{ row.product }}</td>
              <td data-title="getLocalMessage('label.beginning.balance')" class="number" style="width:80px" sortable="openingBalance">{{
                row.openingBalance | number }}
              </td>
              <td data-title="getLocalMessage('label.quantity.received')" class="number" style="width:80px" sortable="recipts">{{ row.receipts | number
                }}
              </td>
              <td data-title="getLocalMessage('label.quantity.consumed')" class="number" style="width:80px" sortable="issues">{{ row.issues | number }}
              </td>
              <td data-title="getLocalMessage('label.adjustments')" class="number" style="width:80px" sortable="adjustment">{{ row.adjustments
                | number }}
              </td>
              <td data-title="getLocalMessage('label.closing.balance')" class="number" style="width:80px" sortable="closingBalance">{{
                row.closingBalance | number }}
              </td>
              <td data-title="getLocalMessage('label.mos')" class="number" style="width:80px" sortable="monthsOfStock">{{ row.monthsOfStock |
                number }}
              </td>
              <td data-title="getLocalMessage('label.amc')" class="number" style="width:80px" sortable="averageMonthlyConsumption">{{
                row.averageMonthlyConsumption | number }}
              </td>
              <td data-title="getLocalMessage('label.max.stock')" class="number" style="width:80px" sortable="maximumStock">{{ row.maximumStock
                | number }}
              </td>
              <td data-title="getLocalMessage('label.quantity.ordered')" class="number" style="width:80px" sortable="reorderAmount">{{
                row.reorderAmount | number }}
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
      </div>
  </div>
</div>

</div>
